<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>{:C('PRO_TITLE')} </title>
    <meta name="description" content="User login page" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/assets/css/font-awesome.min.css" />

    <!-- text fonts -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/ace.min.css" />

    <!--[if lte IE 9]>
            <link rel="stylesheet" href="__PUBLIC__/assets/css/ace-part2.min.css" />
        <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
          <link rel="stylesheet" href="__PUBLIC__/assets/css/ace-ie.min.css" />
        <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/ace.onpage-help.css" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
        <script src="__PUBLIC__/assets/js/html5shiv.js"></script>
        <script src="__PUBLIC__/assets/js/respond.min.js"></script>
        <![endif]-->
    <style>
        html,
        body,
        {
            width: 100%;
            height: 100%;
            position: relative;
        }
        /*style="border:1px solid #d5d5d5;background-color:rgba(0, 0, 0, 0) !important;width:100%;color:white"*/

        .login-container {
            position: absolute;
            left: 50%;
            bottom: 14%;
            transform: translate(-50%);
            background: rgba(0, 0, 0, 0.35);
            /*opacity: 0.7;*/
            border-radius: 5px;
            width: 300px;
        }

        .login-container .block {
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            text-align: left
        }

        .login-container .block input {
            display: inline-block;
            width: auto;
            border: none;

            background-color: rgba(0, 0, 0, 0);
            color: #fff;
        }

        .login-container .block {
            position: relative;
        }

        .login-container .block img {
            /*position: absolute;*/
            color: #fff;
            font-size: 20px;
            /*left: 17px;*/
            /*top: 8px;*/
            width: 20px;
            height: 20px;
            margin-left: 5px;
        }

        .login-container .logbtn {
            position: absolute;
            top: 140px;
            left: 0;
            width: 300px;
            /*background: #433c50;*/
        }
        /*style="background:#c9caca;color:#111159;display:inline-block;width:100%;height:30px;line-height:30px"*/

        .login-container .logbtn .wcc_btn {
            background: rgba(0, 0, 0, 0.35);

            border: none;
            border-radius: 5px;
        }

        .login-container .logbtn .btnspan {
            color: #fff;
            height: 36px;
            line-height: 36px;
            font-size: 20px;
        }

        .login-layout .widget-box {
            padding: 0;
        }

        .p-logo {

            position: absolute;
            left: 50%;
            margin-left: -490px;
            top: 20%;
        }

        .p-logo img {
            width: 980px;
        }
        .big_title{
          font-size: 35px;
          color: #fff;
          font-weight: 300;
          margin: 20px 30px;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-transition-delay: 99999s;
            -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
        }

        @media (max-width: 768px) {
            .login-container {
                position: absolute;
                left: 50%;
                bottom: 30%;
                transform: translate(-50%);
                background: rgba(0, 0, 0, 0.35);

                border-radius: 5px;
            }
            .login-container .logbtn {
                position: absolute;
                top: 140px;
                left: 0;
                width: 300px;
                /*background: #433c50;*/
            }
            .p-logo {


                margin-left: -100px;
            }
            .p-logo img {
                width: 200px;
            }
        }
    </style>
</head>

<body class="login-layout blur-login">
    <div class="main-container">
        <div class="main-content">
            <div class="m-logo">
                <img src="__PUBLIC__/assets/css/images/m-logo.png" style="width:32px;" />
            </div>
            <div class="p-logo">
                <div class="big_title">{:C('PRO_TITLE')} </div>
                <img src="__PUBLIC__/web/pro_img/{:C('PRO_IMAGE_PATH')}"  style="height:320px">
            </div>
            <!--<div class="">-->
            <!-- <div class="col-sm-10 col-sm-offset-1">/ -->
            <div class="login-container">
                <div class="center titlogo">
                    <!--<img src="__PUBLIC__/assets/images/TITlogo.png"  style="width:100%" />-->
                </div>


                <div class="position-relative">
                    <div id="login-box" class="login-box visible widget-box no-border" style="background-color:transparent;margin-top:0px">
                        <div class="widget-body" style="background-color:transparent">
                            <div class="widget-main" style="background-color:transparent;text-align:center">

                                <form action="__ACTION__" method="post">

                                    <label class="block clearfix">
                                      <img src="__PUBLIC__/assets/css/images/user_icon.png" alt="">
                                     <input type="text" placeholder="Username" class="form-control"   id="username" name="data[username]"  />

                                                    </label>

                                    <label class="block clearfix">
                                     <img src="__PUBLIC__/assets/css/images/lock_icon.png" alt="">
                                      <input type="password" class="form-control"  placeholder="Password" id="password" name="data[password]"/>


                                                    </label>



                                    <div class="clearfix logbtn" style="text-align:center;margin-top:20px">
                                        <button type="submit" class=" wcc_btn " style="padding:0!important;width:100%" value="登录" name="submit">
                                                            <span  class=" btnspan"   >Sign in</span>
                                                        </button>
                                    </div>

                                    <div class="space-4"></div>

                                </form>


                            </div>
                            <!-- /.widget-main -->


                        </div>
                        <!-- /.widget-body -->
                    </div>
                    <!-- /.login-box -->

                </div>
                <!-- /.position-relative -->


                <!-- </div> -->
            </div>
            <!-- /.col -->
            <!--  </div>/.row -->
        </div>
        <!-- /.main-content -->
    </div>
    <!-- /.main-container -->

</body>

</html>